<template>
  <div class="swiper" :style="{height:list_height+'px'}">
    <div class="view" :style="{width:viewWidth+'px',height:list_height+'px'}" @click="playVideo">
      <video
        ref="myVideo"
        :src="goodsVideo"
        :width="viewWidth+'px'"
        :height="list_height+'px'"
        controls="controls"
        preload
        loop
        v-show="isShowVideo"
      >您的浏览器不支持视频播放</video>
      <img
        :src="viewUrl"
        alt
        :style="{width:viewWidth+'px',height:list_height+'px'}"
        v-show="!isShowVideo"
      >
      <img src="../assets/images/icon_play.png" alt class="stopIcon" v-if="isShowPlayIcon">
    </div>
    <div
      class="list"
      :style="{width:swiperWidth+'px',height:list_height+'px'}"
      @mouseenter="showBtn"
      @mouseleave="hideBtn"
    >
      <ul :style="offsetTop">
        <li
          v-for="(item,index) in imgList"
          :key="index"
          @click="viewShow(item,index)"
          :style="{marginBottom:spacing+'px'}"
        >
          <img
            :src="item.url"
            alt
            :style="{height:imgHeight+'px'}"
            :class="{borderShow:item.isShow}"
          >
          <img src="../assets/images/icon_play.png" alt class="firstStopIcon" v-if="index==0">
        </li>
      </ul>
      <div class="pre" v-show="showPreNext" @click="preMethod">
        <i class="el-icon-caret-top"></i>
      </div>
      <div class="next" v-show="showPreNext" @click="nextMethod">
        <i class="el-icon-caret-bottom"></i>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "swiper",
  props: ["imgList", "goodsVideo"],
  data() {
    return {
      // newImgList: [],
      // listItem: {},
      list: [
        // {url:require("@/assets/static_index/goods/image1.png")},
        // {url:require("@/assets/static_index/goods/image2.png")},
        // {url:require("@/assets/static_index/goods/image3.png")},
        // {url:require("@/assets/static_index/goods/image4.png")},
        // {url:require("@/assets/static_index/goods/image1.png")},
        // {url:require("@/assets/static_index/goods/image2.png")},
        // {url:require("@/assets/static_index/goods/image3.png")},
        // {url:require("@/assets/static_index/goods/image4.png")}
      ],
      //大图显示路径
      viewUrl: "",
      //   大图显示的宽度
      viewWidth: 374,
      //竖型滚动，轮播图的宽度
      swiperWidth: 86,
      // 轮播图显示区的高度（竖型为高度，横型为宽度）
      list_height: 374,
      //竖型滚动，单个图片的高度
      imgHeight: 86,
      //位移的总距离
      distance: 0,
      //每次要滚动的距离（图片的高度+两个图片之间的间距）
      unit_distance: 96,
      //   两个图片之间的间距
      spacing: 10,
      //轮播图显示区图片的数量
      img_num: 4,
      //滚动的速度
      speed: 5,
      //是否显示上下切换按钮
      showPreNext: false,
      //默认选中第一张图片
      imgIndex: 0,
      //当点击第一张图片时是否显示视频
      isShowVideo: false,
      //是否显示视频播放按钮
      isShowPlayIcon: true
    };
  },
  computed: {
    offsetTop() {
      //这里用了计算属性，用transform来移动整个图片列表
      return {
        transform: `translate3d(0,${this.distance}px, 0)`
      };
    }
  },
  watch: {
    imgList(newData, oldData) {
      if (this.imgList && this.imgList.length > 0) {
        this.viewUrl = this.imgList[this.imgIndex].url;
        this.list = this.imgList;
        this.list[this.imgIndex].isShow = true;
      }
    },
    //监听是否选中第一张图片，是否显示播放按钮
    imgIndex(newData, oldData) {
      if (this.imgIndex == 0) {
        this.isShowPlayIcon = true;
      } else {
        this.isShowVideo=false;
        this.isShowPlayIcon = false;
        this.$refs.myVideo.pause();
      }
    }
  },
  mounted() {},
  methods: {
    //点击轮播图滚动
    viewShow(item, index) {
      //修改大图显示URL
      this.imgIndex = index;
      this.viewUrl = this.list[this.imgIndex].url;
      this.insertData();
      item.isShow = true;
      // Ul的高度
      var ul_height =
        this.list.length * (this.imgHeight + this.spacing) - this.spacing;
      //list的高度
      var list = this.list_height;
      if (
        index == parseInt(-this.distance / this.unit_distance) &&
        this.distance != 0
      ) {
        this.move(this.unit_distance, 1);
      } else if (
        index ==
          parseInt(-this.distance / this.unit_distance) + (this.img_num - 1) &&
        this.distance > -(ul_height - list)
      ) {
        // console.log(index);
        this.move(this.unit_distance, -1);
      }
    },
    // 轮播图滚动动画
    move(offset, direction) {
      let des = 0;
      const temp = setInterval(() => {
        if (des >= offset) {
          clearInterval(temp);
        } else {
          des += this.speed;
          this.distance += this.speed * direction;
        }
      }, 20);
    },
    //往数据里添加是否显示选中图片边框数据
    insertData() {
      this.list.forEach((el, index) => {
        el.isShow = false;
      });
    },
    showBtn() {
      this.showPreNext = true;
    },
    hideBtn() {
      this.showPreNext = false;
    },
    //上一张
    preMethod() {
      if (this.imgIndex > 0) {
        this.imgIndex--;
      } else {
        this.imgIndex = 0;
      }

      this.insertData();
      this.viewUrl = this.list[this.imgIndex].url;
      this.list[this.imgIndex].isShow = true;
      // Ul的高度
      var ul_height =
        this.list.length * (this.imgHeight + this.spacing) - this.spacing;
      //list的高度
      var list = this.list_height;
      if (
        this.imgIndex == parseInt(-this.distance / this.unit_distance) &&
        this.distance != 0
      ) {
        this.move(this.unit_distance, 1);
      } else if (
        this.imgIndex ==
          parseInt(-this.distance / this.unit_distance) + (this.img_num - 1) &&
        this.distance > -(ul_height - list)
      ) {
        // console.log(index);
        this.move(this.unit_distance, -1);
      }
    },
    //下一张
    nextMethod() {
      if (this.imgIndex < this.imgList.length - 1) {
        this.imgIndex++;
      } else {
        this.imgIndex = this.imgList.length - 1;
      }

      this.insertData();
      this.viewUrl = this.list[this.imgIndex].url;
      this.list[this.imgIndex].isShow = true;
      // Ul的高度
      var ul_height =
        this.list.length * (this.imgHeight + this.spacing) - this.spacing;
      //list的高度
      var list = this.list_height;
      if (
        this.imgIndex == parseInt(-this.distance / this.unit_distance) &&
        this.distance != 0
      ) {
        this.move(this.unit_distance, 1);
      } else if (
        this.imgIndex ==
          parseInt(-this.distance / this.unit_distance) + (this.img_num - 1) &&
        this.distance > -(ul_height - list)
      ) {
        // console.log(index);
        this.move(this.unit_distance, -1);
      }
    },
    //点击播放视频
    playVideo() {
      let video = this.$refs.myVideo;
      if (this.imgIndex == 0) {
        if (video.paused) {
           this.isShowVideo = true;
          this.isShowPlayIcon = false;
          video.play();
        } else {
         this.isShowPlayIcon = true;
         video.pause();
        }
      }
    }
  }
};
</script>
<style scoped>
.swiper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  overflow: hidden;
}
.list {
  position: relative;
  /* width: 0.43rem; */
  height: 100%;
  cursor: pointer;
}
.list ul {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.list li {
  /* margin-bottom: 0.05rem; */
  width: 100%;
  position: relative;
}
.list li img {
  width: 100%;
}
.view {
  height: 100%;
  /* width: 1.87rem; */
  position: relative;
}
.view img {
  width: 100%;
  height: 100%;
}
.borderShow {
  border: 1px solid #64312c;
}
.list .pre {
  width: 100%;
  height: 0.16rem;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  line-height: 0;
  color: #fff;
}
.list .next {
  width: 100%;
  height: 0.16rem;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 0;
  line-height: 0;
  color: #fff;
}
.view .stopIcon {
  width: 0.6rem;
  height: 0.6rem;
  position: absolute;
  top:28%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.list li .firstStopIcon {
  width: 0.3rem;
  height: 0.3rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>